// 仪表盘1
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.dashboard1'));
  // 2，指定配置
  let option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '70%'],
        radius: '100%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [0.25, '#236B8E'],
              [0.5, '#5F9F9F'],
              [0.75, '#ADEAEA'],
              [1, '#C0D9D9']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '70%',
          width: 3,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: 'auto',
            width: 3
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 12,
          distance: -34,
          rotate: 'tangential',
          formatter: function (value) {
            if (value === 1) {
              return "100";
            } else if (value === 0.75) {
              return '75';
            } else if (value === 0.5) {
              return '50';
            } else if (value === 0.25) {
              return '25';
            } else if (value === 0) {
              return '0';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '40%'],
          fontSize: 18,
          color: 'rgba(255, 255, 255, 0.8)',
          fontWeight: 'bold'
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },
        data: [
          {

            value: 0.054,
            name: "第一产业 (5.40%)"
          }
        ]
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
//仪表盘2
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.dashboard2'));
  // 2，指定配置
  let option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '70%'],
        radius: '100%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [0.25, '#87ceff'],
              [0.5, '#00ced1'],
              [0.75, '#7ec0ee'],
              [1, '#7d9ec0']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '70%',
          width: 3,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: 'auto',
            width: 3
          }
        },
        axisLabel: {
          color: '#eee',
          fontSize: 12,
          distance: -34,
          rotate: 'tangential',
          formatter: function (value) {
            if (value === 1) {
              return "100";
            } else if (value === 0.75) {
              return '75';
            } else if (value === 0.5) {
              return '50';
            } else if (value === 0.25) {
              return '25';
            } else if (value === 0) {
              return '0';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '40%'],
          fontSize: 18,
          color: '#eee',
          fontWeight: 'bold'
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },
        data: [
          {

            value: 0.383,
            name: "第二产业 (38.30%)"
          }
        ]
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 仪表盘3
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.dashboard3'));
  // 2，指定配置
  let option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '70%'],
        radius: '100%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [0.25, '#33ccff'],
              [0.5, '#3399ff'],
              [0.75, '#3366cc'],
              [1, '#33cccc']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '70%',
          width: 3,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 15,
          lineStyle: {
            color: 'auto',
            width: 3
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 12,
          distance: -34,
          rotate: 'tangential',
          formatter: function (value) {
            if (value === 1) {
              return "100";
            } else if (value === 0.75) {
              return '75';
            } else if (value === 0.5) {
              return '50';
            } else if (value === 0.25) {
              return '25';
            } else if (value === 0) {
              return '0';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '40%'],
          fontSize: 18,
          color: 'rgba(255, 255, 255, 0.8)',
          fontWeight: 'bold'
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },
        data: [
          {

            value: 0.546,
            name: "第三产业 (54.60%)"
          }
        ]
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 柱状图
// 模块1
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.bar .chart1'));
  // 声明颜色数组
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 2，指定配置
  let option = {

    color: '#1089E7',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '0%',
      containLabel: true
    },
    xAxis: {
      color: 'rgba(255, 255, 255, .2)',
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .2)',
          type: 'solid'
        },

      },
      axisTick: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, .3)'
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, .5)',
      }
    },
    yAxis: {
      type: 'category',
      data: ['印度', '德国', '日本', '中国', '美国'],
      /*  axisLine: {
         show: false
       }, */
      /*  splitLine: {
         show: false
       }, */
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, .5)',
      }
    },

    series: [

      {
        name: 'GDP',
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 2,
          color: function (params) {
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 20,
        data: [3.42, 4.08, 4.26, 17.96, 25.44],

      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块2
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.bar .chart2'));
  // 2，指定配置
  let option = {
    legend: {
      top: "6%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12",
      }
    },
    tooltip: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '20%',
      containLabel: true
    },
    dataset: {
      source: [
        ['', '中国GDP', '中国人均GDP'],
        ['2018', 91.93, 6.55],
        ['2019', 98.65, 7.008],
        ['2020', 101.36, 7.18],
        ['2021', 114.92, 8.14],
        ['2022', 120.47, 8.57],
        ['2023', 126.06, 8.94],
      ]
    },
    xAxis: {
      type: 'category',
      color: 'rgba(255, 255, 255, .2)',
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .2)',
          type: 'solid'
        },
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, .5)',
      }
    },
    yAxis: {
      axisLabel: {
        color: 'rgba(255, 255, 255, .5)',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .2)',
          type: 'solid'
        },
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 2,
          color: '#00cccc',
          // 柱子之间的距离
          barCategoryGap: 5,
        },
      },
      {
        type: 'bar',
        barWidth: '20%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 2,
          color: '#3399cc',
          // 柱子之间的距离
          barCategoryGap: 5,
        },
      },



    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块3
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.bar .chart3'));
  // 声明颜色数组
  var myColor = ["#44", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 2，指定配置
  var option = {
    tooltip: {
      trigger: "axis"
    },
    grid: {
      left: "10",
      top: "30",
      right: "20",
      bottom: "10",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        // x轴更换数据
        data: [
          '1953',
          '1961',
          '1971',
          '1989',
          '2007',
          '2023'
        ],
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "GDP增速",
        type: "line",
        smooth: false,
        // 单独修改当前线条的样式
        lineStyle: {
          color: "#99ccff",
          width: "2"
        },
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#6699ff",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
        },
        data: [
          15.6,
          -27.3,
          19.3,
          4.21,
          14.23,
          5.2,

        ]
      },

    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块4
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.bar .chart4'));
  // 2，指定配置
  let option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '10%',
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        center: ['50%', '65%'],
        bottom: 0,
        name: '增加值占GDP比重',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 5.40, name: '第一产业' },
          { value: 38.30, name: '第二产业' },
          { value: 54.60, name: '第三产业' }
        ],
        color: [
          "#ffcc99",
          "#66cccc",
          "#9999cc"
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',

          }
        },
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 柱状图2
(function () {
  var myColor = ["#ccbbff", "#ccff99", "#99bbff", "#00aaaa", "#f0bbff"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据

  var option = {
    grid: {
      top: "15%",
      left: "5%",
      bottom: "10%"
    },
    tooltip: {
      // trigger: "axis"
      show: true
    },
    xAxis: {
      data: ['广东', '江苏', '山东', '浙江', '四川'],
      // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      // x轴线的颜色为   rgba(255,255,255,.2)
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      }
    },
    yAxis: {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      // 修改分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    dataGroupId: '',
    animationDurationUpdate: 500,
    series: {
      type: 'bar',
      id: 'sales',
      barWidth: "40%",
      itemStyle: {
        barBorderRadius: 2,
        // 此时的color 可以修改柱子的颜色
        color: function (params) {
          return myColor[params.dataIndex];
        }
      },
      data: [
        {
          value: 13.57,
          groupId: '广东省'
        },
        {
          value: 12.82,
          groupId: '江苏省'
        },
        {
          value: 9.21,
          groupId: '山东省'
        },
        {
          value: 8.26,
          groupId: '浙江省'
        },
        {
          value: 6.01,
          groupId: '四川省'
        }
      ],
      universalTransition: {
        enabled: true,
        divideShape: 'clone'
      }
    }
  };
  const drilldownData = [
    {
      dataGroupId: '广东省',
      data: [
        ['深圳', 3.46],
        ['广州', 3.04],
        ['佛山', 1.33],
        ['东莞', 1.14],
        ['惠州', 0.56]
      ]
    },
    {
      dataGroupId: '江苏省',
      data: [
        ['苏州', 2.47],
        ['南京', 1.74],
        ['无锡', 1.55],
        ['南通', 1.18],
        ['常州', 1.10]
      ]
    },
    {
      dataGroupId: '山东省',
      data: [
        ['青岛', 1.58],
        ['济南', 1.28],
        ['烟台', 1.02],
        ['潍坊', 0.76],
        ['临沂', 0.61]
      ]
    },
    {
      dataGroupId: '浙江省',
      data: [
        ['杭州', 2.006],
        ['宁波', 1.65],
        ['温州', 0.87],
        ['绍兴', 0.78],
        ['嘉兴', 0.71]
      ]
    },
    {
      dataGroupId: '四川省',
      data: [
        ['深圳', 3.46],
        ['广州', 3.04],
        ['佛山', 1.33],
        ['东莞', 1.14],
        ['惠州', 0.56]
      ]
    }
  ];
  myChart.on('click', function (event) {
    if (event.data) {
      var subData = drilldownData.find(function (data) {
        return data.dataGroupId === event.data.groupId;
      });
      if (!subData) {
        return;
      }
      myChart.setOption({
        xAxis: {
          data: subData.data.map(function (item) {
            return item[0];
          })
        },
        series: {
          type: 'bar',
          barWidth: "40%",
          itemStyle: {
            barBorderRadius: 2,
            // 此时的color 可以修改柱子的颜色
            color: function (params) {
              return myColor[params.dataIndex];
            }
          },
          id: 'sales',
          dataGroupId: subData.dataGroupId,
          data: subData.data.map(function (item) {
            return item[1];
          }),
          universalTransition: {
            enabled: true,
            divideShape: 'clone'
          }
        },
        graphic: [
          {
            type: 'text',
            left: 20,
            top: 5,
            style: {
              text: '省级排名',
              fontSize: 14,
              fill: 'rgba(255,255,255,.5)'
            },
            onclick: function () {
              myChart.setOption(option);
            }
          }
        ]
      });
    }
  });

  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 产业模块
// 模块一
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.money .chart1'));
  // 声明颜色数组
  var myColor = ['#fc8251', '#5470c6', '#9A60B4', '#ef6567', '#f9c956'];
  // 2，指定配置
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      top: '6%',
      data: ['工业增加值', '比上年增长'],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '23%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisPointer: {
          type: 'shadow'
        },
        color: 'rgba(255, 255, 255, .2)',
        boundaryGap: [0, 0.01],
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'solid'
          },

        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, .3)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '亿元',
        min: 0,
        max: 500000,
        interval: 50000,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value}'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
            type: 'solid'
          },

        },
      },
      {
        type: 'value',
        name: '%',
        min: 0,
        max: 15,
        interval: 5,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value} %'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
      }
    ],
    series: [
      {
        name: '工业增加值',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '亿元';
          }
        },
        data: [
          311859, 312903, 374546, 395044, 399103
        ],
        barWidth: '35%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 0
      },

      {
        name: '比上年增长',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        data: [4.8, 2.4, 10.4, 2.7, 4.2],
        itemStyle: {
          color: '#87cefa'
        }
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块二
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.money .chart2'));
  // 声明颜色数组
  var myColor = ['#C1EBDD', '#FFC851', '#5A5476', '#1869A0', '#FF9393'];
  // 2，指定配置
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      top: '6%',
      data: ['建筑业增加值', '比上年增长'],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '23%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisPointer: {
          type: 'shadow'
        },
        color: 'rgba(255, 255, 255, .2)',
        boundaryGap: [0, 0.01],
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'solid'
          },

        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, .3)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '亿元',
        min: 0,
        max: 100000,
        interval: 10000,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value}'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
            type: 'solid'
          },

        },
      },
      {
        type: 'value',
        name: '%',
        min: 0,
        max: 12,
        interval: 3,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value} %'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
      }
    ],
    series: [
      {
        name: '建筑业增加值',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '亿元';
          }
        },
        data: [
          70648, 72445, 78741, 80766, 85691
        ],
        barWidth: '35%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 0
      },

      {
        name: '比上年增长',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        data: [5.2, 2.7, 1.1, 2.9, 7.1],
        itemStyle: {
          color: '#9a60b4'
        }
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块三
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.money .chart3'));
  // 声明颜色数组
  var myColor = ['#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
  // 2，指定配置
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      top: '6%',
      data: ['服务业增加值', '比上年增长'],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '23%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisPointer: {
          type: 'shadow'
        },
        color: 'rgba(255, 255, 255, .2)',
        boundaryGap: [0, 0.01],
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'solid'
          },

        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, .3)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '亿元',
        min: 0,
        max: 800000,
        interval: 100000,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value}'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
            type: 'solid'
          },

        },
      },
      {
        type: 'value',
        name: '%',
        min: 0,
        max: 18,
        interval: 3,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value} %'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
      }
    ],
    series: [
      {
        name: '服务业增加值',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '亿元';
          }
        },
        data: [
          535371, 551974, 614476, 642727, 688238
        ],
        barWidth: '35%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 0
      },

      {
        name: '比上年增长',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        data: [7.2, 1.9, 8.5, 3.0, 5.8],
        itemStyle: {
          color: '#fc8452'
        }
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 模块四
(function () {
  // 1.实例化对象
  let myChart = echarts.init(document.querySelector('.money .chart4'));
  // 声明颜色数组
  var myColor = ['#ffcccc',
    '#ffc8b4', '#ccccff',
    "#5BF4FB",
    '#cceeff'
  ];
  // 2，指定配置
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#fff'
        }
      }
    },
    legend: {
      top: '6%',
      data: ['快递业务量', '比上年增长'],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      top: '23%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019', '2020', '2021', '2022', '2023'],
        axisPointer: {
          type: 'shadow'
        },
        color: 'rgba(255, 255, 255, .2)',
        boundaryGap: [0, 0.01],
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
            type: 'solid'
          },

        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, .3)'
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '亿件',
        min: 0,
        max: 1500,
        interval: 300,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value}'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
            type: 'solid'
          },

        },
      },
      {
        type: 'value',
        name: '%',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          color: 'rgba(255, 255, 255, .5)',
          formatter: '{value} %'
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
      }
    ],
    series: [
      {
        name: '快递业务量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '亿元';
          }
        },
        data: [
          635.2, 833.6, 1083.0, 1105.8, 1320.7
        ],
        barWidth: '35%',
        itemStyle: {
          // 修改柱子圆角
          barBorderRadius: 10,
          color: function (params) {
            return myColor[params.dataIndex];
          }
        },
        // 柱子之间的距离
        barCategoryGap: 0
      },

      {
        name: '比上年增长',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          }
        },
        data: [25.3, 31.2, 29.9, 2.1, 19.4],
        itemStyle: {
          color: '#ea7ccc'
        }
      }
    ]
  };
  // 3.把配置给实例对象 
  myChart.setOption(option);
  //4. 让图表跟随屏幕自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 2023年居民消费价格月度涨跌幅度
(function () {
  var myChart = echarts.init(document.querySelector(".line .chart"));
  var option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      top: "0%",
      data: ["月度同比", "月度环比"],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },

    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        // x轴更换数据
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ],
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        }
      }
    ],
    yAxis: [
      {
        name: '%',
        type: "value",
        min: -1,
        max: 2,
        interval: 1,
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "月度同比",
        type: "line",
        smooth: false,
        // 单独修改当前线条的样式
        lineStyle: {
          color: "#9955ff",
          width: "2"
        },
        // 填充颜色设置
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        },
        // 设置拐点
        symbol: "triangle",
        // 拐点大小
        symbolSize: 2,
        // 开始不显示拐点， 鼠标经过显示
        // showSymbol: false,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#9955ff",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 5
        },
        data: [
          2.1, 1.0, 0.7, 0.1, 0.2, 0.0, 0.2, 0.3, 0.2, -0.1, -0.5, 0.1
        ]
      },
      {
        name: "月度环比",
        type: "line",
        // smooth: true,
        lineStyle: {
          normal: {
            color: "#77ddff",
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)"
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)"
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
          }
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 3,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#77ddff",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 6
        },
        // 开始不显示拐点， 鼠标经过显示
        // showSymbol: false,
        data: [
          0.8, -0.5, -0.3, -0.1, -0.2, -0.2, -0.3, 0.1, 0.0, -0.2, -0.5, -0.3
        ]
      }
    ]
  };
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 2023年全国居民人均消费支出及其构成
(function () {
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var option = {
    color: [
      "#b088ff",
      "#99bbff",
      "#00aaaa",
      "#00ddaa",
      "#eeee00",
      "#ddaa00",
      "#e8ccff",
      "#77ddff"
    ],
    tooltip: {
      trigger: "item",
      formatter: `{a} <br/>{b} : {c}元 ({d}%)`
    },
    legend: {
      left: "0",
      bottom: "0%",
      top: '0',
      orient: 'vertical',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: "地区分布",
        type: "pie",
        radius: ["20%", "70%"],
        center: ["70%", "50%"],
        roseType: "radius",
        // 图形的文字标签
        label: {
          fontSize: 10
        },
        // 链接图形和文字的线条
        labelLine: {
          // length 链接图形的线条
          length: 6,
          // length2 链接文字的线条
          length2: 8
        },
        data: [
          { value: 7983, name: "食品烟酒" },
          { value: 6095, name: "居住" },
          { value: 3652, name: "交通通信" },
          { value: 2904, name: "教育文化娱乐" },
          { value: 2460, name: "医疗保健" },
          { value: 1526, name: "生活用品及服务" },
          { value: 1479, name: "衣着" },
          { value: 697, name: "其他用品及服务" },

        ]
      }
    ]
  };
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 2029-2023年本专科，中等职业教育及普通高中招生人数
(function () {
  var yearData = [
    {
      data: [
        [915, 967, 1001, 1015, 1042],
        [600, 645, 656, 651, 616],
        [839, 876, 905, 948, 968]
      ]
    }
  ];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".map_chart .chart"));
  // 2.指定配置
  var option = {
    // 通过这个color修改两条线的颜色
    color: ["#9f88ff", "#99bbff", '#00ddaa'],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: "rgba(255,255,255,.9)"
      },
      // 这个10% 必须加引号
      right: "10%",
      top:'5%'
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#aaa", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        '2019',
        '2020',
        '2021',
        '2022',
        '2023'
      ],
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "rgba(255,255,255,.9)" // 文本颜色
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "rgba(255,255,255,.9)" // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线

      },
      splitLine: {
        show: false
      },
      min: 600,
      max: 1100,
      interval: 50,
    },
    series: [
      {
        name: "普通，职业本专科",
        type: "line",
        data: yearData[0].data[0]
      },
      {
        name: "中等职业教育",
        type: "line",
        data: yearData[0].data[1]
      },
      {
        name: "普通高中",
        type: "line",
        data: yearData[0].data[2]
      }
    ]
  };

  // 3. 把配置给实例对象
  myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();